<template>
  <div class="BigWrap">
    <div>
      <!-- 品牌主题馆大头部 -->
      <div id="club">
        <div class="clubContent">
          <!-- 头部搜索 -->
          <div class="HeadSearch">
            <span class="HeadSearchJian" @click="GoToHead">
              <img src="../../../assets/images/pinpai/箭头@2x.png">
            </span>
            <span>
              <van-search
                shape="round"
                background="transparent"
                placeholder="搜索品牌"
              />
            </span>
            
          </div>
          <p>品牌主题馆</p>
          <van-grid :border="false" :column-num="3">
            <van-grid-item  text="贵妇牌">
              <van-image :src="require('../../../assets/images/pinpai/贵妇牌@2x.png')" />
              <span>贵妇牌</span>
            </van-grid-item>
            <van-grid-item text="评价馆">
              <van-image :src="require('../../../assets/images/pinpai/评价馆@2x.png')" />
              <span>评价馆</span>
            </van-grid-item>
            <van-grid-item text="成份党">
              <van-image :src="require('../../../assets/images/pinpai/成份党@2x.png')" />
              <span>成份党</span>
            </van-grid-item>
            <van-grid-item text="敏感肌">
              <van-image :src="require('../../../assets/images/pinpai/敏感肌@2x.png')" />
              <span>敏感肌</span>
            </van-grid-item>
            <van-grid-item text="国货馆">
              <van-image :src="require('../../../assets/images/pinpai/国货馆@2x.png')" />
              <span>国货馆</span>
            </van-grid-item>
            <van-grid-item text="日韩馆">
              <van-image :src="require('../../../assets/images/pinpai/日韩馆@2x.png')" />
              <span>日韩馆</span>
            </van-grid-item>
            <van-grid-item text="美洲馆">
              <van-image :src="require('../../../assets/images/pinpai/美洲馆@2x.png')" />
              <span>美洲馆</span>
            </van-grid-item>
            <van-grid-item text="欧洲馆">
              <van-image :src="require('../../../assets/images/pinpai/欧洲馆@2x.png')" />
              <span>欧洲馆</span>
            </van-grid-item>
            <van-grid-item text="其他地区">
              <van-image :src="require('../../../assets/images/pinpai/其他地区@2x.png')" />
              <span>其他地区</span>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="weekTop">
          <div class="weekTopWord">品牌TOP100周榜</div>
          <!-- 周榜图标 -->
          <div class="weekTopImg">
            <img src="../../../assets/images/pinpai/奖杯@2x.png">
          </div>
        </div>
      </div>
      <!-- 热度榜 -->
      <div class="HotBang">
        <van-tabs v-model="active" background="#E0F4F3" color="#97DAD7" title-inactive-color="#97DAD7" title-active-color="#5BC0C0">
          <!-- 热度榜主体 -->
          <van-tab title="热度榜" class="hot">     
            <!-- 公告 -->
            <div class="notice">
              <span class="noticeSpan1">每周一6:00发布|本期更 新于2021/05/21</span>
              <span class="noticeSpan2">榜单规则</span>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>科颜氏</span>
                  <span>KIEHL’S</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>100001</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>欧码博士</span>
                  <span>PhytoCeuticals</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>143412</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>莱博泥</span>
                  <span>La Prairie</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>126442</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="评分榜" class="hot">
            <!-- 公告 -->
            <div class="notice">
              <span class="noticeSpan1">每周一6:00发布|本期更 新于2021/05/21</span>
              <span class="noticeSpan2">榜单规则</span>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>欧磅琪</span>
                  <span>OBAGI</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>126442</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>潘婷</span>
                  <span>PANTINE</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>126000</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>雅诗兰黛</span>
                  <span>Estee Lauder</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>93858</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="回购率榜" class="hot">
            <!-- 公告 -->
            <div class="notice">
              <span class="noticeSpan1">每周一6:00发布|本期更 新于2021/05/21</span>
              <span class="noticeSpan2">榜单规则</span>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>兰蔻</span>
                  <span>LANCOME</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>90177</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>科颜氏</span>
                  <span>KIEHL’S</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>126442</span>
              </div>
            </div>
            <!-- 具体榜单排名 -->
            <div class="noticeRanking">
              <!-- 排名 -->
              <div class="noticeRankingWord">1</div>
              <!-- 产品 -->
              <div class="product">
                <!-- logo -->
                <div class="ProductLogo">
                  <img src="../../../assets/images/pinpai/科颜氏logo@2x.png">
                </div>
                <!-- 产品名称 -->
                <div class="ProductName">
                  <span>科颜氏</span>
                  <span>KIEHL’S</span>
                </div>
              </div>
              <!-- 火热度 -->
              <div class="Hotdu">
                <!-- 火苗 -->
                <span class="flame">
                  <img src="../../../assets/images/pinpai/形状5@2x.png">
                </span>
                <!-- 热度 -->
                <span>126442</span>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      active: 2,
    };
  },
  methods: {
    GoToHead() {
      this.$router.push("/home");
    }
  },
  components: {
    [VanImage.name]: VanImage,
  },
  mounted() {
    new BScroll('.BigWrap',{
      scrollY: true,
      scrollX: false,
      click: true,
      bottom: true,
    })
  }
}  
</script>

<style lang="less">
.BigWrap {
  width: 100%;
  height: 500px;
}
#club {
  width: 100%;
  background: url("../../../assets/images/pinpai/pp-background.png") no-repeat -48.5px;
  background-size: 120%;
  // background-position: 50px;
  .clubContent {
    width: 100%;
    height: 400px;
    padding: 0 15px;
    // background: redfsfa;
    .HeadSearch {
      display: flex;
      width: 100%;
      height: 47px;
      line-height: 47px;
      margin-bottom: 50px;
      .HeadSearchJian {
        width: 23px;
        height: 22px;
        margin-top: 5px;
        // color: #333333;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .van-search {
        width: 330px;
      }
    }
    p {
      width: 194px;
      height: 38px;
      font-size: 20px;
      font-family: PingFang;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 25px;
    }
    .van-grid-item {
      width: 100%;
      height: 100px;
      background: transparent;
      .van-grid-item__content {
        width: 104px;
        height: 70px;
        background: transparent;
        van-image {
          width: 100%;
          height: 100%;
        }
      }
      span {
        // width: 89px;
        // height: 29px;
        font-size: 15px;
        font-family: PingFang;
        font-weight: bold;
        color: #FFFFFF;
        margin-top: 10px;
      }
    }
  }
  // 周榜样式
  .weekTop {
    width: 100%;
    height: 79px;
    background: url("../../../assets/images/pinpai/形状1@2x.png") no-repeat;
    background-size: 100%;
    padding: 0 15px;
    margin-top: 77px;
    position: relative;
    // overflow: hidden;
    .weekTopWord {
      width: 180.5px;
      height: 19px;
      font-size: 20px;
      font-family: PingFang;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 1px;
      position: absolute;
      left: 21px;
      top: 32.5px;
    }
    // 小图标
    .weekTopImg {
      width: 82px;
      height: 91px;
      position: absolute;
      left: 232.5px;
      bottom: 14.5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.HotBang {
  .van-tabs {
    width: 100%;
    height: 300px;
     .hot{
      width: 100%;
      height: 100px;
      font-size: 12px;
      padding: 0 12px;
      // font-size: 0px;
      .notice {
        width: 350px;
        height: 31px;
        background: #FFEFDF;
        border-radius: 25.5px;
        margin-top: 15px;
        // margin-bottom: 15px;
        line-height: 31px;
        padding: 0 6px;
        color: #FD933D;
        .noticeSpan1 {
          width: 270px;
          height: 12.5px;
          font-size: 12px;
          font-family: PingFang;
          font-weight: bold;
          float: left;
        }
        .noticeSpan2 {
          float: right;
          width: 66px;
          height: 11px;
          font-size: 11px;
          font-family: PingFang;
          font-weight: bold;
        }
      }
      // 具体榜单排名
      .noticeRanking {
        width: 100%;
        height: 50px;
        border-top: #F5F5F5 1px solid;
        border-bottom: #F5F5F5 1px solid;
        padding: 5px 12.5px;
        // line-height: 50px;
        // background: red;
        display: flex;
        justify-content: space-between;
        // 排名数字
        .noticeRankingWord {
          width: 5px;
          height: 13.5px;
          font-size: 18px;
          font-family: PingFang;
          font-weight: bold;
          color: #878787;
          // margin-top: -10px;
        }
        // 产品
        .product {
          display: flex;
          margin-left: -70px;
          // logo
          .ProductLogo {
            width: 39px;
            height: 39px;
            padding: 6.5px 0 5.5px 0;
            img {
              width: 39px;
              height: 27px;
            }
          }
          .ProductName {
            width: 100px;
            height: 60px;
            font-size: 12px;
            line-height: 15px;
            font-family: PingFang;
            font-weight: bold;
            color: #111111;
            margin-left: 8px;
            margin-top: 3px;
            // display: flex;
            // flex-direction: column;
          }
        }
        // 火热度
        .Hotdu {
          margin-top: 12px;
          color: #FF6D6D;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .flame {
            width: 10px;
            height: 13px;
            margin-right: 5px;
            img {
              width: 10;
              height: 13px;
            }
          }
        }
      }
    }
  }
}

</style>